<html>
<head>
    <meta charset="utf-8">
    <script src="/admin/js/echarts.min.js"></script>
    <script src="/admin/js/china-map.js"></script>
    <link rel="stylesheet" type="text/css" href="/admin/js/layer/css/layui.css">
    <style>
        /* 新增样式部分 */
        body {
            margin: 0;
            padding: 20px;  /* 给页面添加呼吸感 */
        }
        #map {
            margin-right: 2%;  /* 添加右侧间隔 */
            float: left;
        }
        #map123 {
            float: right;
        }
        /* 清除浮动 */
        div::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
<div>
    <div class="layui-row">

        <div class="layui-col-xs6" style="z-index: 1!important;">

            <div id="map" style="width: 100%; height: 600px; text-align: left;"></div>

        </div>

        <div class="layui-col-xs6" id="layui-col-xs6-2">

            <div id="orderby" style="width: 100%;height: 600px;z-index: 9999999999;">
                <div class="layui-tabs" lay-options="{index: 0}">

                    <ul class="layui-tabs-header">

                        <li>访问IP排行榜</li>

                        <li>访问URL排行榜</li>

                    </ul>

                    <div class="layui-tabs-body" style="padding: 0px;">

                        <div class="layui-tabs-item">
                            <table class="layui-hide" id="ip_top"></table>
                        </div>

                        <div class="layui-tabs-item"><table class="layui-hide" id="url_top"></table></div>

                    </div>

                </div>
            </div>

        </div>

    </div>







</div>
<script type="text/javascript" src="/admin/js/layer/layui.js"></script>
<script>
    ready(function() {

        layui.use(['zhanshop', 'table'], function(){
            var $ = layui.$;
            var zhanshop = layui.zhanshop;
            var dateStr = zhanshop.getParam("date");
            if(typeof dateStr !== 'string') dateStr = '-1';
            zhanshop.view(API_ADDRESS + apiUrlecharts+"?type=map&date="+dateStr, '#view', function (data) {
                var table = layui.table;
                $(".layui-icon-next").click();
                var ipTopData = [];
                for(var key in data.ip_top1000){
                    ipTopData.push({ ip: key, total_num: data.ip_top1000[key] });
                }

                table.render({
                    elem: '#ip_top',
                    cols: [[ //标题栏
                        {field: 'ip', title: 'ip+地区', width: '60%', escape: false},
                        {field: 'total_num', title: '总次数', width: '40%'}
                    ]],
                    data: ipTopData,
                    limits: [20, 50, 100],
                    limit: 12, // 每页默认显示的数量
                    page: {
                        "groups": 5,
                        "first": false,
                        "last": false,
                        "layout": [
                            "prev",
                            "page",
                            "next",
                            "limit",
                            "count"
                        ]
                    }
                });

                var uriTopData = [];
                for(var key in data.uri_top1000){
                    uriTopData.push({ url: key, total_num: data.uri_top1000[key] });
                }

                table.render({
                    elem: '#url_top',
                    cols: [[ //标题栏
                        {field: 'url', title: 'url', width: '60%'},
                        {field: 'total_num', title: '总次数', width: '40%'}
                    ]],
                    data: uriTopData,
                    limits: [20, 50, 100],
                    limit: 14, // 每页默认显示的数量
                    page: {
                        "groups": 5,
                        "first": false,
                        "last": false,
                        "layout": [
                            "prev",
                            "page",
                            "next",
                            "limit",
                            "count"
                        ]
                    }
                });

                var chart = echarts.init(document.getElementById('map'));

                var mapData = [];
                try {
                    for(var key in data.area_stats.uv_list){
                        mapData.push({ name: key, value: data.area_stats.uv_list[key] });
                    }
                }catch (e) {}


                var option = {
                    grid: {
                        left: "0%",   // 地图绘制区域贴左
                        right: "10%", // 给视觉映射组件留空间
                        containLabel: true
                    },
                    title: {
                        text: '中国省份数据',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}：{c}', // 显示省份名称和数值
                    },
                    visualMap: {
                        type: 'piecewise', // 分段型视觉映射
                        pieces: [
                            { min: 1000000, max: 9999999999, label: '百万以上', color: '#FF0066' },
                            { min: 100000, max: 999999, label: '99.99万内', color: '#ff5722' },
                            { min: 10000, max: 99999, label: '9.9万内', color: '#CC00FF' },
                            { min: 1000, max: 9999, label: '9999人内', color: '#9966FF' },
                            { min: 500, max: 999, label: '999人内', color: '#6699FF' },
                            { min: 100, max: 499, label: '499人内', color: '#31bdec' },
                            { min: 1, max: 99, label: '99人内', color: '#ffb800' }
                        ],
                        left: 'left',
                        textStyle: { color: '#333' }
                    },
                    series: [{
                        name: '省份数据',
                        type: 'map',
                        map: 'china',
                        roam: false, // 允许拖动缩放
                        label: {
                            show: true, // 显示省份名称
                            fontSize: 12
                        },
                        data: mapData,
                        emphasis: { // 高亮样式
                            label: { show: true, color: 'black' },
                            itemStyle: { areaColor: '#FFD700' }
                        }
                    }]
                };

                chart.setOption(option);
            }, "GET", "", {}, false);

            if(window.screen.width <= 800){
                $("#map").css("display", "none");
                $("#layui-col-xs6-2").css("width", "100%");
            }
            $(window).resize(function() {
                var width = $(window).width();
                var height = $(window).height();
                if($(window).width() <= 1500 && window.screen.width / 1.5 >= $(window).width()){
                    $("#map").css("display", "none");
                    $("#layui-col-xs6-2").css("width", "100%");
                }else {
                    $("#map").css("display", "");
                    $("#layui-col-xs6-2").css("width", "50%");
                }
                //console.log('窗口宽度:' + width + ', 窗口高度:' + height, window.screen.width);
            });

        });

    });


</script>
</body>
</html>
